<!-- 我的 -->
<template>
	<div class='mine-box'>
		<van-nav-bar title="个人中心" />
		<div class="personal" @click="toPersonalInfo">
			<van-image round width="1.4rem" height="1.4rem" fit="contain" :src="avatar_default" />
			<dl>
				<dt>{{nick}}</dt>
				<dd>{{bindCommunity}}</dd>
			</dl>
			<van-icon name="arrow" />
		</div>
		<ul>
			<li @click="toMineCommunity">
				<van-cell-group>
					<van-field label="我的小区" right-icon="arrow" left-icon="manager" disabled />
				</van-cell-group>
			</li>
			<li @click="toChangePassword">
				<van-cell-group>
					<van-field label="修改密码" right-icon="arrow" left-icon="eye" disabled />
				</van-cell-group>
			</li>
			<li @click="toUpdate">
				<van-cell-group>
					<van-field label="检测更新" right-icon="arrow" left-icon="underway" disabled class="banben1" />
					<span class="banben">当前版本{{banben}}</span>
				</van-cell-group>
			</li>
			<li @click="toRecommendDownload">
				<van-cell-group>
					<van-field label="推荐下载" right-icon="arrow" left-icon="thumb-circle" disabled />
				</van-cell-group>
			</li>
			<li @click="goOut()">
				<van-cell-group>
					<!-- <van-field
              label=""
              right-icon="arrow"
              left-icon="thumb-circle"
              disabled
            /> -->
					<van-button type="warning" class="goOut">退出登录</van-button>
				</van-cell-group>
			</li>
		</ul>
	</div>
</template>

<script>
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	//例如：import 《组件名称》 from '《组件路径》';
	import { mapMutations, mapState } from 'vuex'
	export default {
		name: 'Mine',
		//import引入的组件需要注入到对象中才能使用
		components: {},
		data() {
			//这里存放数据
			return {
				nick: '昵称',
				bindCommunity: '水星苑',
				avatar_default: require('../assets/img/avatar_male_man.png'),
				banben: plus.runtime.version,
			};
		},
		//监听属性 类似于data概念
		computed: {
			...mapState(["homeId"])
		},
		//监控data中的数据变化
		watch: {},
		//方法集合
		methods: {
			...mapMutations(['changeToken', "changehomeId"]),
			toPersonalInfo() {
				this.$router.push('/personalInfo');
			},
			toMineCommunity() {
				this.$router.push('/minecommunity');
			},
			toChangePassword() {
				this.$router.push('/changepassword');
			},
			toUpdate() {
				this.$router.push({
					name: "update",
					params: {
						banben: this.banben
					}
				})

			},
			toRecommendDownload() {
				this.$router.push('/RecommendDownload')
			},
			goOut() {
				localStorage.setItem('token', "")
				this.changeToken("")
				this.changehomeId("")
				console.log(this.homeId)
				this.$router.push('/start1');
			}
		},
		//生命周期 - 创建完成（可以访问当前this实例）
		created() {

		},
		//生命周期 - 挂载完成（可以访问DOM元素）
		mounted() {

		},
		beforeCreate() { }, //生命周期 - 创建之前
		beforeMount() { }, //生命周期 - 挂载之前
		beforeUpdate() { }, //生命周期 - 更新之前
		updated() { }, //生命周期 - 更新之后
		beforeDestroy() { }, //生命周期 - 销毁之前
		destroyed() { }, //生命周期 - 销毁完成
		activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
	}
</script>
<style lang='scss' scoped>
	//@import url(); 引入公共css类
	.mine-box {
		.personal {
			height: 1.6rem;
			position: relative;
			padding-left: 2rem;

			.van-image {
				position: absolute;
				left: 0.3rem;
				top: 50%;
				margin-top: -0.7rem;
				border: 1px solid #bbb;
			}

			dl {
				padding: 0.2rem 0;

				dt {
					padding: 0.2rem 0;
				}
			}

			.van-icon {
				position: absolute;
				right: 0.3rem;
				font-size: 0.32rem;
				top: 50%;
				margin-top: -0.16rem;
				color: #969799;
			}
		}

		ul {
			li {
				margin: 0.3rem 0;
			}
		}
	}

	.goOut {
		width: 100%;
	}

	.banben1 {
		position: relative;
	}

	.banben {
		position: absolute;
		right: .7rem;
		bottom: .1rem;
		color: #969799;
	}
</style>